<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/assets/pear/css/pear.css"/>
    <style>
        .layui-icon {
            font-size: 22px;
            padding: 5px;
            cursor: pointer;
        }

        .layui-icon:hover {
            background-color: #dddddd;
        }

        .type-menu {
            display: none;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" lay-filter="lay-edit">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">上级菜单</label>
                    <div id="clickParentName" class="layui-input-block">
                        <input type="text" id="parentName" name="parentName" value="" readonly class="layui-input">
                        <input type="hidden" id="parentId" name="parentId" value="" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单类型</label>
                    <div class="layui-input-block">
                        <input type="radio" lay-filter="menuType" name="menuType" value="M" title="目录">
                        <input type="radio" lay-filter="menuType" name="menuType" value="C" title="菜单" checked>
                        <input type="radio" lay-filter="menuType" name="menuType" value="F" title="按钮">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="menuName" value="" lay-verify="required" autocomplete="off"
                               placeholder="请输入菜单名称" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 type-menu">
                <div class="layui-form-item">
                    <label class="layui-form-label">请求地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" value="" autocomplete="off"
                               placeholder="请输入请求地址" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 type-menu">
                <div class="layui-form-item">
                    <label class="layui-form-label">打开方式</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_frame" value="1" title="页面" checked>
                        <input type="radio" name="is_frame" value="0" title="新窗口">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 type-menu">
                <div class="layui-form-item">
                    <label class="layui-form-label">权限标识</label>
                    <div class="layui-input-block">
                        <input type="text" name="perms" value="" autocomplete="off"
                               placeholder="请输入权限标识" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">显示排序</label>
                    <div class="layui-input-block" style="width: 120px">
                        <input type="number" name="orderNum" value="" lay-verify="required|number" autocomplete="off"
                               placeholder="请输入显示排序" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="icon" name="icon" value="" autocomplete="off"
                               placeholder="图标" class="layui-input">
                        <div id="selectIon" class="flex-column"
                             style="height: 300px;overflow-y: auto;width: 520px;display:none">
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-bot"></i>
                                <i class="layui-icon layui-icon-leaf"></i>
                                <i class="layui-icon layui-icon-folder"></i>
                                <i class="layui-icon layui-icon-folder-open"></i>
                                <i class="layui-icon layui-icon-gitee"></i>
                                <i class="layui-icon layui-icon-github"></i>
                                <i class="layui-icon layui-icon-light"></i>
                                <i class="layui-icon layui-icon-moon"></i>
                                <i class="layui-icon layui-icon-error"></i>
                                <i class="layui-icon layui-icon-success"></i>
                                <i class="layui-icon layui-icon-question"></i>
                                <i class="layui-icon layui-icon-lock"></i>
                                <i class="layui-icon layui-icon-eye"></i>
                                <i class="layui-icon layui-icon-eye-invisible"></i>
                                <i class="layui-icon layui-icon-clear"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-backspace"></i>
                                <i class="layui-icon layui-icon-disabled"></i>
                                <i class="layui-icon layui-icon-tips-fill"></i>
                                <i class="layui-icon layui-icon-test"></i>
                                <i class="layui-icon layui-icon-music"></i>
                                <i class="layui-icon layui-icon-chrome"></i>
                                <i class="layui-icon layui-icon-firefox"></i>
                                <i class="layui-icon layui-icon-edge"></i>
                                <i class="layui-icon layui-icon-ie"></i>
                                <i class="layui-icon layui-icon-heart-fill"></i>
                                <i class="layui-icon layui-icon-heart"></i>
                                <i class="layui-icon layui-icon-time"></i>
                                <i class="layui-icon layui-icon-at"></i>
                                <i class="layui-icon layui-icon-email"></i>
                                <i class="layui-icon layui-icon-rss"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-sound"></i>
                                <i class="layui-icon layui-icon-mute"></i>
                                <i class="layui-icon layui-icon-mike"></i>
                                <i class="layui-icon layui-icon-key"></i>
                                <i class="layui-icon layui-icon-gift"></i>
                                <i class="layui-icon layui-icon-bluetooth"></i>
                                <i class="layui-icon layui-icon-wifi"></i>
                                <i class="layui-icon layui-icon-logout"></i>
                                <i class="layui-icon layui-icon-android"></i>
                                <i class="layui-icon layui-icon-ios"></i>
                                <i class="layui-icon layui-icon-windows"></i>
                                <i class="layui-icon layui-icon-transfer"></i>
                                <i class="layui-icon layui-icon-service"></i>
                                <i class="layui-icon layui-icon-subtraction"></i>
                                <i class="layui-icon layui-icon-addition"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-slider"></i>
                                <i class="layui-icon layui-icon-print"></i>
                                <i class="layui-icon layui-icon-export"></i>
                                <i class="layui-icon layui-icon-cols"></i>
                                <i class="layui-icon layui-icon-screen-restore"></i>
                                <i class="layui-icon layui-icon-screen-full"></i>
                                <i class="layui-icon layui-icon-rate-half"></i>
                                <i class="layui-icon layui-icon-rate"></i>
                                <i class="layui-icon layui-icon-rate-solid"></i>
                                <i class="layui-icon layui-icon-cellphone"></i>
                                <i class="layui-icon layui-icon-vercode"></i>
                                <i class="layui-icon layui-icon-login-wechat"></i>
                                <i class="layui-icon layui-icon-login-qq"></i>
                                <i class="layui-icon layui-icon-login-weibo"></i>
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-username"></i>
                                <i class="layui-icon layui-icon-refresh-3"></i>
                                <i class="layui-icon layui-icon-auz"></i>
                                <i class="layui-icon layui-icon-spread-left"></i>
                                <i class="layui-icon layui-icon-shrink-right"></i>
                                <i class="layui-icon layui-icon-snowflake"></i>
                                <i class="layui-icon layui-icon-tips"></i>
                                <i class="layui-icon layui-icon-note"></i>
                                <i class="layui-icon layui-icon-home"></i>
                                <i class="layui-icon layui-icon-senior"></i>
                                <i class="layui-icon layui-icon-refresh"></i>
                                <i class="layui-icon layui-icon-refresh-1"></i>
                                <i class="layui-icon layui-icon-flag"></i>
                                <i class="layui-icon layui-icon-theme"></i>
                                <i class="layui-icon layui-icon-notice"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-website"></i>
                                <i class="layui-icon layui-icon-console"></i>
                                <i class="layui-icon layui-icon-face-surprised"></i>
                                <i class="layui-icon layui-icon-set"></i>
                                <i class="layui-icon layui-icon-template-1"></i>
                                <i class="layui-icon layui-icon-app"></i>
                                <i class="layui-icon layui-icon-template"></i>
                                <i class="layui-icon layui-icon-praise"></i>
                                <i class="layui-icon layui-icon-tread"></i>
                                <i class="layui-icon layui-icon-male"></i>
                                <i class="layui-icon layui-icon-female"></i>
                                <i class="layui-icon layui-icon-camera"></i>
                                <i class="layui-icon layui-icon-camera-fill"></i>
                                <i class="layui-icon layui-icon-more"></i>
                                <i class="layui-icon layui-icon-more-vertical"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-rmb"></i>
                                <i class="layui-icon layui-icon-dollar"></i>
                                <i class="layui-icon layui-icon-diamond"></i>
                                <i class="layui-icon layui-icon-fire"></i>
                                <i class="layui-icon layui-icon-return"></i>
                                <i class="layui-icon layui-icon-location"></i>
                                <i class="layui-icon layui-icon-read"></i>
                                <i class="layui-icon layui-icon-survey"></i>
                                <i class="layui-icon layui-icon-face-smile"></i>
                                <i class="layui-icon layui-icon-face-cry"></i>
                                <i class="layui-icon layui-icon-cart-simple"></i>
                                <i class="layui-icon layui-icon-cart"></i>
                                <i class="layui-icon layui-icon-next"></i>
                                <i class="layui-icon layui-icon-prev"></i>
                                <i class="layui-icon layui-icon-upload-drag"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-upload"></i>
                                <i class="layui-icon layui-icon-download-circle"></i>
                                <i class="layui-icon layui-icon-component"></i>
                                <i class="layui-icon layui-icon-file-b"></i>
                                <i class="layui-icon layui-icon-user"></i>
                                <i class="layui-icon layui-icon-find-fill"></i>
                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                                <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>
                                <i class="layui-icon layui-icon-add-1"></i>
                                <i class="layui-icon layui-icon-play"></i>
                                <i class="layui-icon layui-icon-pause"></i>
                                <i class="layui-icon layui-icon-headset"></i>
                                <i class="layui-icon layui-icon-video"></i>
                                <i class="layui-icon layui-icon-voice"></i>
                                <i class="layui-icon layui-icon-speaker"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-fonts-del"></i>
                                <i class="layui-icon layui-icon-fonts-code"></i>
                                <i class="layui-icon layui-icon-fonts-html"></i>
                                <i class="layui-icon layui-icon-fonts-strong"></i>
                                <i class="layui-icon layui-icon-unlink"></i>
                                <i class="layui-icon layui-icon-picture"></i>
                                <i class="layui-icon layui-icon-link"></i>
                                <i class="layui-icon layui-icon-face-smile-b"></i>
                                <i class="layui-icon layui-icon-align-left"></i>
                                <i class="layui-icon layui-icon-align-right"></i>
                                <i class="layui-icon layui-icon-align-center"></i>
                                <i class="layui-icon layui-icon-fonts-u"></i>
                                <i class="layui-icon layui-icon-fonts-i"></i>
                                <i class="layui-icon layui-icon-tabs"></i>
                                <i class="layui-icon layui-icon-radio"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-circle"></i>
                                <i class="layui-icon layui-icon-edit"></i>
                                <i class="layui-icon layui-icon-share"></i>
                                <i class="layui-icon layui-icon-delete"></i>
                                <i class="layui-icon layui-icon-form"></i>
                                <i class="layui-icon layui-icon-cellphone-fine"></i>
                                <i class="layui-icon layui-icon-dialogue"></i>
                                <i class="layui-icon layui-icon-fonts-clear"></i>
                                <i class="layui-icon layui-icon-layer"></i>
                                <i class="layui-icon layui-icon-date"></i>
                                <i class="layui-icon layui-icon-water"></i>
                                <i class="layui-icon layui-icon-code-circle"></i>
                                <i class="layui-icon layui-icon-carousel"></i>
                                <i class="layui-icon layui-icon-prev-circle"></i>
                                <i class="layui-icon layui-icon-layouts"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-util"></i>
                                <i class="layui-icon layui-icon-templeate-1"></i>
                                <i class="layui-icon layui-icon-upload-circle"></i>
                                <i class="layui-icon layui-icon-tree"></i>
                                <i class="layui-icon layui-icon-table"></i>
                                <i class="layui-icon layui-icon-chart"></i>
                                <i class="layui-icon layui-icon-chart-screen"></i>
                                <i class="layui-icon layui-icon-engine"></i>
                                <i class="layui-icon layui-icon-triangle-d"></i>
                                <i class="layui-icon layui-icon-triangle-r"></i>
                                <i class="layui-icon layui-icon-file"></i>
                                <i class="layui-icon layui-icon-set-sm"></i>
                                <i class="layui-icon layui-icon-reduce-circle"></i>
                                <i class="layui-icon layui-icon-add-circle"></i>
                                <i class="layui-icon layui-icon-404"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-about"></i>
                                <i class="layui-icon layui-icon-up"></i>
                                <i class="layui-icon layui-icon-down"></i>
                                <i class="layui-icon layui-icon-left"></i>
                                <i class="layui-icon layui-icon-right"></i>
                                <i class="layui-icon layui-icon-circle-dot"></i>
                                <i class="layui-icon layui-icon-search"></i>
                                <i class="layui-icon layui-icon-set-fill"></i>
                                <i class="layui-icon layui-icon-group"></i>
                                <i class="layui-icon layui-icon-friends"></i>
                                <i class="layui-icon layui-icon-reply-fill"></i>
                                <i class="layui-icon layui-icon-menu-fill"></i>
                                <i class="layui-icon layui-icon-log"></i>
                                <i class="layui-icon layui-icon-picture-fine"></i>
                                <i class="layui-icon layui-icon-face-smile-fine"></i>
                            </div>
                            <div class="flex-row">
                                <i class="layui-icon layui-icon-list"></i>
                                <i class="layui-icon layui-icon-release"></i>
                                <i class="layui-icon layui-icon-ok"></i>
                                <i class="layui-icon layui-icon-help"></i>
                                <i class="layui-icon layui-icon-chat"></i>
                                <i class="layui-icon layui-icon-top"></i>
                                <i class="layui-icon layui-icon-star"></i>
                                <i class="layui-icon layui-icon-star-fill"></i>
                                <i class="layui-icon layui-icon-close-fill"></i>
                                <i class="layui-icon layui-icon-close"></i>
                                <i class="layui-icon layui-icon-ok-circle"></i>
                                <i class="layui-icon layui-icon-add-circle-fine"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="visible" value="0" title="显示" checked>
                        <input type="radio" name="visible" value="1" title="隐藏">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button id="close" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-close"></i>
                关闭
            </button>
        </div>
    </div>
</form>
<script src="/assets/layui/layui.js"></script>
<script src="/assets/pear/pear.js"></script>
<script>
    var $
    layui.use(['form', 'jquery', 'menuApi'], function () {
        let form = layui.form;
        $ = layui.jquery;
        var menuApi = layui.menuApi;
        var loadIndex = layer.load(0);
        var url = layui.url()
        var data = {}
        menuApi.get(url.search.menuId).then(res => {
            if (res.data.parentId === 0) {
                res.data.parentName = '无'
            }
            data = res.data
            form.val('lay-edit', data);
        }).finally(() => {
            layer.close(loadIndex)
        })

        form.on('submit(user-save)', function (data) {
            menuApi.edit(data.field).then(res => {
                closeWindowToMain()
                searchIframeBySrc('user.html').layui.table.reload("user-table");
                parent.layer.msg('更新成功')
            })
            return false;
        });
        form.on('radio(menuType)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            if (data.value === 'C') {
                $('.type-menu').show()
            } else {
                $('.type-menu').hide()
            }
        });

        $('#close').click(() => {
            closeWindowToMain(window.name)
        })
        $('#clickParentName').click(() => {
            if ($('#parentId').val() === '0') {
                layer.msg('主菜单不能选择上级菜单')
                return
            }
            openWindowToMain({
                title: '选择菜单',
                width: '420px',
                url: `/page/view/system/menu/menuSelected.html?menuName=${data.menuName}&menuId=${data.menuId}`
            })
        })
        $('#selectIon').on('click', 'i', function () {
            var attr = $(this).attr('class');
            attr = attr.split(' ')[1]
            $('#icon').val(attr)
        })
        let hideTimer;
        $('input#icon').focus(function () {
            clearTimeout(hideTimer);
            $('#selectIon').slideDown(); // 下滑显示
        }).blur(function () {
            hideTimer = setTimeout(() => {
                $('#selectIon').slideUp(); // 上滑隐藏
            }, 200); // 延迟200ms，避免快速切换焦点
        });
    })
    var ifrData = {}

    function formIframeData(data) {
        ifrData = data
        if (data.menuId) {
            $('#menuId').val(data.menuId)
            $('#parentName').val(data.menuName)
        }
    }
</script>
</body>
</html>
